import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';
import { auth, signIn, signOut } from "@/auth";
import Link from 'next/link';
import { Button } from "@/app/ui/button";

function SignInWithGithub() {
    return (
        <form
            action={async () => {
                "use server";
                await signIn("github", { redirectTo: '/user' });
            }}
            className='mt-4'
        >
            <Button type="submit">GitHub</Button>
        </form>
    );
}

function SignInWithGitee() {
    return (
        <form
            action={async () => {
                "use server";
                await signIn("gitee", { redirectTo: '/user' });
            }}
            className='mt-4 ml-4'
        >
            <Button type="submit">Gitee</Button>
        </form>
    );
}


export default function LoginPage() {
    return (
        <main className="flex items-center justify-center md:h-screen">
            <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
                <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
                    <div className="w-32 text-white md:w-36">
                        <AcmeLogo />
                    </div>
                </div>
                <LoginForm />
                <div className='mt-4'>
                    <div className='flex items-center'>
                        <span className='mr-2'>no account to</span>  <Button>
                            <Link
                                href="/register"

                            >
                                sign up
                            </Link>
                        </Button>
                    </div>
                    <div className='flex'>

                        <SignInWithGithub />
                        <SignInWithGitee />
                    </div>

                </div>
            </div>
        </main>
    );
}
